<template>
  <div>
    <!-- <my-cover v-model="image1"></my-cover> -->
    <!-- <my-cover v-model="image1"></my-cover> -->
    <my-cover v-model="images[0]"></my-cover>
    <hr>
    <button @click="hClick3">try-catch</button>
    <button @click="hClick1">用promise的结构来写ajax请求</button>
    <button @click="hClick2">用async-await的结构来写ajax请求</button>
    <hr>
    <com></com>
  </div>
</template>
<style scoped>
  /* 如果在父组件中的style加了scoped，则无法选中
  子组件的样式 */

  /* /deep/ 加在哪？ 加在子组件的选择器前 */

  /**如果希望在父组件加了scoped，同时还要能选中子组件的样式，就要用到 透传*/
  /deep/ .com-p{
    color: red;
  }
</style>
<script>
import MyCover from '../../components/MyCover.vue'
import com from './com.vue'
export default {
  name: 'home',
  data () {
    return {
      images: []
      // image1: ''
    }
  },
  components: {
    com,
    MyCover
  },
  methods: {

    hClick3 () {
      // console.log(1)
      // const res = JSON.parse('{a:1')
      // console.log(3, res)
      try {
        // 可能会出错
        console.log(1)
        const res = JSON.parse('{a:1')
        console.log(3, res)
      } catch (err) {
        console.log(err)
        console.log(2)
      }
    },
    hClick1 () {
      // this.$axios这个函数的返回值是一个promise
      const p = this.$axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks'
      })
      console.log(p)

      p.then(res => {
        console.log(res.data)
      }).catch(err => {
        console.log(err)
      })
    },
    async hClick2 () {
      // this.$axios这个函数的返回值是一个promise
      // await的后面一般是跟一个返回promise对象的函数调用
      // 作用：
      //   - 把这个异步的调用变成同步的
      //   - 它一直会等着，这个异步代码执行完成，并取出执行结果

      // await 必须在 使用 async修饰的函数内部
      try {
        console.log(1)
        const res = await this.$axios({
          method: 'GET',
          url: 'http://www.liulongbin.top:3006/api/getbooks'
        })
        console.log(res)
        console.log(res.data)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
